<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Web storage</title>
		
		<!--java脚本-->
		<script type="text/javascript">
		
			//函数：程序功能，也称之为方法
			function onLoad(){
				
				//Storage类型有没有定义
				if(typeof(Storage) == "undefined"){
					//如果没有，说明浏览器不支持
					alert("不好意思，你的浏览器不支持 Web Storage");
				}else{
					//如果有
					
					//按钮的（click）监听
					save.addEventListener("click",saveToLocalStorage);//如果发生了点击，就执行保存函数
					load.addEventListener("click",loadFromLocalStorage);
					
					clear.addEventListener("click",deleteFromLocalStorage);
				}
			}
			//保存函数
			function saveToLocalStorage(){
				//把inputname文本框的值保存到username键
				localStorage.username = inputname.value;
			}
			
			//读取函数
			function loadFromLocalStorage(){
				//把storage里面的myname读取出来插入到show_LocalStorage div里面
				show_LocalStorage.innerHTML = localStorage.username+" 你好~";
			}
			
			//删除数据
			function deleteFromLocalStorage(){
				//单独的去删除某一条数据
				delete localStorage.username;
				
				//清除所有数据
//				localStorage.clear();
			}
			
		</script>
	</head>
	<body onload="onLoad()">
		<img src="img/welcome.jpg"/><br />
		请输入你的姓名：<input type="text" id="inputname"/>
		<div id="show_LocalStorage">
			
		</div><br />
		<button id="save">保存到Web Storage</button>
		<button id="load">从Web Storage读取数据</button>
		<button id="clear">删除</button>
	</body>
</html>
